<template>
  <div id="line_chart" class="yl-chart-container"></div>
</template>

<script>
import { Line } from '@antv/g2plot'
export default {
  data () {
    return {
      data: [
        {
          type: '家具家电',
          sales: 38
        },
        {
          type: '粮油副食',
          sales: 52
        },
        {
          type: '生鲜水果',
          sales: 61
        },
        {
          type: '美容洗护',
          sales: 145
        },
        {
          type: '母婴用品',
          sales: 48
        },
        {
          type: '进口食品',
          sales: 38
        },
        {
          type: '食品饮料',
          sales: 38
        },
        {
          type: '家庭清洁',
          sales: 38
        }
      ]
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.createLineChart()
    })
  },

  methods: {
    createLineChart () {
      const linePlot = new Line(document.getElementById('line_chart'), {
        title: {
          visible: true,
          text: '曲线折线图'
        },
        description: {
          visible: true,
          text: '用平滑的曲线代替折线。'
        },
        padding: 'auto',
        forceFit: true,
        data: this.data,
        xField: 'type',
        yField: 'sales',
        smooth: true
      })

      linePlot.render()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
